<button
  nz-button
  (click)="handleAdd()"
  [nzLoading]="submitting"
  class="add-btn"
>
  {{ $t('_addRow') }}
</button>

<button
  nz-button
  nzType="primary"
  (click)="handleSubmit()"
  [nzLoading]="submitting"
>
  {{ $t('_save') }}
</button>

<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSpan]="2">{{ $t('_logoImg') }}</nz-form-label>
    <nz-form-control [nzSpan]="22">
      <nz-input-group [nzSuffix]="suffixLogo">
        <input nz-input formControlName="logo" />
      </nz-input-group>
      <ng-template #suffixLogo>
        <app-upload-image (onChange)="onLogoChange($event, 'logo')" />
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="2">{{ $t('_logoDarkImg') }}</nz-form-label>
    <nz-form-control [nzSpan]="22">
      <nz-input-group [nzSuffix]="suffixDarkLogo">
        <input nz-input formControlName="darkLogo" />
      </nz-input-group>
      <ng-template #suffixDarkLogo>
        <app-upload-image (onChange)="onLogoChange($event, 'darkLogo')" />
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="2">{{ $t('_logoMaxHeight') }}</nz-form-label>
    <nz-form-control [nzSpan]="22">
      <nz-slider
        formControlName="height"
        [nzMin]="40"
        [nzMax]="120"
      ></nz-slider>
    </nz-form-control>
  </nz-form-item>
</form>
<div class="mb-2">e.g. https://example.com/search?q=$&#123;q&#125;</div>
<nz-table #basicTable [nzData]="searchList" [nzShowPagination]="false">
  <thead>
    <tr>
      <th class="min-w-[150px]">{{ $t('_engineName') }}</th>
      <th class="min-w-[220px]">{{ $t('_engineUrl') }}</th>
      <th class="min-w-[260px]">{{ $t('_icon') }}</th>
      <th class="min-w-[220px]">{{ $t('_desc') }}</th>
      <th class="min-w-[100px]">{{ $t('_isDisable') }}</th>
      <th class="min-w-[170px]">{{ $t('_action') }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of searchList; index as idx">
      <td>
        <input nz-input [(ngModel)]="data.name" maxlength="10" />
      </td>
      <td>
        <input *ngIf="!data.isInner" nz-input [(ngModel)]="data.url" />
      </td>
      <td class="whitespace-nowrap">
        <img *ngIf="data.icon" [src]="data.icon" class="icon" />
        <input
          nz-input
          type="text"
          [(ngModel)]="data.icon"
          style="width: 180px"
        />
        <app-upload-image
          (onChange)="onChangeUpload($event, idx)"
        ></app-upload-image>
      </td>
      <td>
        <input nz-input [(ngModel)]="data.placeholder" maxlength="50" />
      </td>
      <td>
        <nz-switch [(ngModel)]="data.blocked"></nz-switch>
      </td>
      <td class="select-none">
        <a (click)="moveUp(idx)" [class.invisible]="idx === 0">{{
          $t('_moveUp')
        }}</a>
        <a (click)="moveDown(idx)" class="ml-2.5">{{ $t('_moveDown') }}</a>
        <a
          *ngIf="!data.isInner"
          nz-popconfirm
          nzPopconfirmPlacement="rightTop"
          nzOkType="danger"
          [nzPopconfirmTitle]="$t('_confirmDel')"
          nzPopconfirmPlacement="bottom"
          (nzOnConfirm)="handleDelete(idx)"
          class="ml-2.5 !text-red-500"
        >
          {{ $t('_del') }}
        </a>
      </td>
    </tr>
  </tbody>
</nz-table>
